<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <div class="row align-items-center">
            <div class="col">

            </div>
            <div class="col">
                <div class="alert alert-danger alert-dismissible fade show invisible text-center" style="width: 42rem;"
                    role="alert">
                    <strong>提示：</strong><label for="" id="msg">不得行</label>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="col">

            </div>

        </div>

        <div class="align-items-center yx">
            <div class="col">

            </div>
            <div class="col">

                <div class="swrap">
                    <!-- 页面外围框架 -->
        
                    <script src="js/register.js"></script>
        
        
                    <form id="registerForm" action="/registerDone" method="POST">
                        <table align="center" border="1" width="500">
                            <tr>
                                <td colspan="2">
                                    <h4 align="center">
                                        <font face="楷体" size="5"><b>用户注册</b></font>
                                    </h4>
                                </td>
                            </tr>
                            <tr>
                                <td>请输入账号：</td>
                                <td><input name="username" id="username" type="text"> </td>
                            </tr>
                            <tr>
                                <td>请输入密码：</td>
                                <td><input name="password" id="password" type="password"> </td>
                            </tr>
                            <tr>
                                <td>请确认密码：</td>
                                <td><input name="confirmpassword" id="confirmpassword" type="password"> </td>
                            </tr>
                           
        
                            <tr>
                                <td></td>
                                <td><input type="button" value="注册" onclick="register()">
                                    <input type="button" value="忘记密码？" onclick="forgot()">
                                    <input type="button" value="返回" onclick="login()">
                                </td>
                            </tr>
                        </table>
                    </form>
        
                </div>

                <div class="col">

                </div>
            </div>

        </div>
        </div>


</body>

</html>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script>
     function login() {
            window.location.href="/login";
        }

    function forgot() {
        window.location.href = "/forgot";
    }

    // 点击注册时 执行的方法（获取数据，进行初步验证，验证通过则通过ajax向后台提交数据；否则提示验证不通过的信息）
    function register() {
        let username = $('#username').val();
        let password = $('#password').val();
        let confirmpassword = $('#confirmpassword').val();
        if (username.length > 0 && password.length > 0 && password === confirmpassword) {
            // ajax请求
            $.ajax({
                url: "/registerDone",
                type: "POST",
                data: $('#registerForm').serialize(),
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code === 200) {
                        window.location.href = "/login";
                    } else {
                        alert_fn(res.msg);
                    }

                },
                error: function (msg) {
                    alert_fn('网络或者服务器有问题');
                }
            })
        } else {// 验证不通过，提示相关信息，并且阻止提交
            alert_fn();
            return false;
        }
    }

    // 这个方法包装了alert的相关行为和显示的内容
    function alert_fn(msg) {
        msg = msg || '密码不能为空，两次密码应该一致';
        // 替换提示的内容
        $('#msg').text(msg);
        // 移除不显示的class，则alert将显示
        $('.invisible').removeClass('invisible');
        // 三秒中后，给alert增加不显示的class，则alert重新隐藏
        setTimeout(() => {
            $('.alert').addClass('invisible');
        }, 3000);
    }
</script>
</body>

</html>